@import url("../../styles/publicStyle.less");

.legal-advice-bottom-container {
  .widthAndHeight(100%, 230px);
  position: fixed;
  bottom: 0;
  border-top: 1px solid @AssistLightGrey;
  background-color: @AssistBgWhite;
  z-index: 99999;

  .other {
    .widthAndHeight(100%, 88px);
    .flex();
    padding: 16px 20px;
    box-sizing: border-box;

    .corporate-counsel-consult,
    .opinions-sugges {
      .widthAndHeight(auto, 56px);
      .flex();
      .DetailsInfoTitle();
      padding: 0 16px;
      border-radius: 28px;
      background-color: rgba(224, 224, 224, .5);
      margin-right: 20px;
      cursor: pointer;
    }

    .corporate-counsel-consult-bg{
      .background(url("@{images}/customer_se_li.png"));
    }

    .opinions-sugges-bg{
      .background(url("@{images}/feedback_li.png"));
    }

    .corporate-counsel-consult-bg,
    .opinions-sugges-bg{
      .widthAndHeight(40px, 40px);
      margin-right: 8px;
    }
  }

  .ask-question {
    .widthAndHeight(100%, 100px);
    .flex();
    padding: 10px 20px 10px 8px;
    box-sizing: border-box;

    .switch-voice-btn {
      .textGather(80px, 80px);

      .iconfont {
        font-size: 76px;
        color: @ContentText;
      }
    }

    .inp {
      .widthAndHeight(486px, 80px);
      flex: 1;
      padding: 0 20px;
      box-sizing: border-box;
      border: 1px solid @AssistLightGrey;
      border-radius: 8px;
      margin: 0 16px 0 8px;

      input[type="text"] {
        .widthAndHeight(100%, 100%);
        font-size: 28px;

        &::placeholder {
          font-size: 28px;
          color: @AnnotativeText;
        }
      }
    }

    .send-inp {
      .ListTitle();
      .textGather(132px, 80px);
      color: @ContentTextWhite;
      background-color: @AssistLightGrey;
      border-radius: 8px;
      cursor: pointer;

      &.send-inp-active {
        background-color: @MainColor;
      }
    }

    .voice-btn {
      .ListTitle();
      .textGather(634px, 80px);
      flex: 1;
      color: @ContentTextWhite;
      margin-left: 8px;
      border-radius: 8px;
      background-color: @AssistLightGrey;
      cursor: pointer;
    }
  }
}
